<template>
	<div style="background-color: white;overflow: hidden;">
		<h2 class="title">个人基本信息</h2>
		<div style="padding: 1.25rem;">
			<div class="personal-item">
				<div class="personal-item-wrapper">
					<div class="personal-item-label">姓名</div>
					<div class="personal-item-content">{{Person.userName}}</div>
				</div>

			</div>
			<div class="personal-item">
				<div class="personal-item-wrapper">
					<div class="personal-item-label">邮箱</div>
					<div class="personal-item-content">{{Person.userEmail}}</div>
				</div>
			
			</div>
			<div class="personal-item">
				<div class="personal-item-wrapper">
					<div class="personal-item-label">网名</div>
					<div class="personal-item-content">{{Person.userNetName}}</div>
				</div>
			</div>
			
			<div class="personal-item">
				<div class="personal-item-wrapper">
					<div class="personal-item-label">头像</div>
					<div class="personal-item-content">
						<img :src="img" style="width: 200px;">
					</div>
				</div>
			</div>
			<div class="personal-item">
				<div class="personal-item-wrapper">
					<div class="personal-item-label">手机号码</div>
					<div class="personal-item-content">{{Person.userPhone}}</div>
				</div>
			</div>
			<div class="personal-item">
				<div class="personal-item-wrapper">
					<div class="personal-item-label">vjudge名</div>
					<div class="personal-item-content">{{Person.vjudgeName}}</div>
				</div>
			</div>
			<div class="personal-item">
				<div class="personal-item-wrapper">
					<div class="personal-item-label">codeforce名</div>
					<div class="personal-item-content">{{Person.codeforcesName}}</div>
				</div>
			</div>
			

		</div>

	</div>
</template>

<script>
	import {
		PersonManager
	} from "../../../request/personCenter.js"
	export default {
		data() {
			return {
               Person:{},
			   img:"../../../assets/QQ图片20210713144719.png"
			}
		},
		methods: {
			//获取用户信息
			getUserInfo() {
				PersonManager.getUserInfo().then(e => {
					console.log(e);
					this.Person = e.data.data;
					this.img=this.Person.userPhoto;
				})
			}
		},
		created() {
			this.getUserInfo();
		}
	}
</script>

<style scoped="scoped">
	.title {
		margin: 20px 20px 10px;
	}
	.personal-item {
		padding: 24px 0;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		font-size: 14px;
		line-height: 20px;
		border-bottom: 1px solid #e8e8e8;
	}

	.personal-item-wrapper {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
	}

	.personal-item-label {
		-webkit-box-flex: 0;
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
		width: 442px;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
	}

	.personal-item-content {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
		color: #666;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		-ms-flex-pack: justify;
		justify-content: space-between;
		word-break: break-all;
	}
	.personal-item-content>img{
		height: 10.5rem;
		width: 2.5rem;
	}
</style>
